<template>
  <div class="p-5">
    <el-form
      ref="formRef"
      :model="form"
      label-width="120px"
      :rules="rules"
    >
      <el-form-item
        label="函数位置"
        prop="script_store"
      >
        <el-radio-group v-model="form.script_store">
          <el-radio :label="1">代码文件</el-radio>
          <el-radio :label="2">在线编码</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="函数中文名" prop="func_name">
        <el-input v-model="form.func_name" placeholder="名称，如：增加数据"></el-input>
      </el-form-item>
      <el-form-item label="函数方法名" prop="func_code">
        <el-input
          v-model="form.func_code"
          placeholder="函数名称"
          :disabled="funcData?.func_code"
        />
      </el-form-item>
      <el-form-item
        label=""
        label-width="0px"
        class="form-item-center"
      >
        <el-button
          size="default"
          type="primary"
          @click="handleSubmit"
        > 提交 </el-button>
        <el-button
          size="default"
          @click="handleCancel()"
        > 取消 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import _ from 'lodash';
import {api} from "@jzl/api";

const props = defineProps({
  funcData: Object,
  module: Object
});

const emit = defineEmits(['close']);

const DEFAULT_FORM = {
  script_store: 1,
  func_code: '',   // create/update/remove/removeBat/query/get/getSingle/getByIds',
  func_name: '',
  func_remark: '', // create/update/remove/removeBat/query/get/getSingle/getByIds',
  type: 3,
  project_id: null,
  app_id: null,
  func_module_id: null
};

const loading = ref(false);
const form = ref(_.cloneDeep(DEFAULT_FORM));
const rules = {
  func_code: [
    { required: true, message: '请输入函数方法名', trigger: 'blur' },
    { pattern: /^[A-Za-z0-9-_]+$/, message: "编码只能由[ 字母数字-_ ]组成", trigger: 'blur' }
  ],
  func_name: [
    { required: true, message: '请输入函数中文名称', trigger: 'blur' }
  ]
};

const init = () => {
  let formData = null;
  let data = _.cloneDeep(props.funcData);

  if (data && data.func_id) {
    formData = data;
  } else {
    let type = _.get(props.module, "type") || 3;

    formData = _.defaults(data || {}, {
      func_module_id: _.get(props.module, 'func_module_id'),
      func_code: $utils.getNanoid(12),
      type,
      app_id: _.get(props.module, "app_id") || -1
    }, DEFAULT_FORM);
  }

  form.value = formData || {};
};

const handleSubmit = async () => {
  let data = _.cloneDeep(form.value);
  let id = _.get(data, 'func_id');
  let ret = null;

  if (id) {
    ret = await api.func.updateFunc(data);
  } else {
    ret = await api.func.createFunc(data);
  }

  loading.value = false;

  if (ret) {
    $jui.toast('操作成功！');
    handleCancel(true);
  }
};

const handleCancel = (flag = false) => {
  emit('cancel:win', flag);
};

onMounted(() => {
  init();
});

watch(() => props.funcData, () => {
  init();
}, { deep: true });
</script>
